<template>
  <div class="x-course-list">
    <div v-loading="loading">
      <div v-if="$slots.searchText">
        <slot name="searchText"></slot>
      </div>
      <div class="x-course-list-content" v-if="list.length" ref="courseList">
        <x-course v-for="item in list" :key="item.id" :data="item"></x-course>
      </div>
      <div class="flex-c" v-else>
        <el-empty description="暂无数据" :image-size="300"></el-empty>
      </div>
    </div>
    <div class="flex-c pagination-wrap" v-if="pagination">
      <el-pagination
        :current-page.sync="pageNum"
        :page-size.sync="limit"
        @size-change="$emit('change')"
        @current-change="$emit('change')"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 9
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: { // 分页功能
      type: Boolean,
      default: false
    },
    showTrainFlag: { // 控制培训状态显示
      type: Boolean,
      default: false
    },
    showStudyFlag: { // 控制学习状态显示
      type: Boolean,
      default: false
    },
    showTrainEndTime: { // 培训截止时间显示
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  watch: {
    list(val){
      // this.$nextTick(()=>{
      //   if(this.$refs.courseList){
      //     if(val.length < 5){
      //       this.$refs.courseList.style.gridTemplateColumns = 'repeat(5, 1fr)'
      //     }else {
      //       this.$refs.courseList.style.gridTemplateColumns = 'repeat(auto-fit, minmax(320px, 1fr))'
      //     }
      //   }
      // })
    },
  },
  computed: {
    pageNum: {
      get () {
        return this.currentPage
      },
      set (val) {
        this.$emit('update:currentPage', val)
      }
    },
    limit: {
      get () {
        return this.pageSize
      },
      set (val) {
        this.$emit('update:pageSize', val)
      }
    }
  },
  methods: {
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.x-course-list {
  /*overflow-y: auto;*/
  /*height: 100%;*/
  .x-course-list-content {
    padding: 0 0.5rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.5rem;
  }
}
  .pagination-wrap{
    margin-top: 0.133rem;
  }
</style>
